<template>
  <div class="ellipse">
    <div
      v-for="(item, index) in periodArr"
      class="circle circle1"
      :key="index"
      :class="!animationStates ? `paused circle${index + 1}` : `circle${index + 1}`"
      @mouseenter="pauseAnimation"
      @mouseleave="resumeAnimation"
    >
      <div>
        <div class="ratio-area">
          <span class="ratio-text">{{ item.ratio }}</span>
          <span>%</span>
        </div>
        <div>上周期: {{ item.count_t0 }}</div>
        <div>本周期: {{ item.count_t1 }}</div>
        <div>{{ item.sentiment_keyword }}</div>
      </div>
    </div>
    <!-- <div
      class="circle circle1"
      :class="{ paused: !animationStates }"
      @mouseenter="pauseAnimation"
      @mouseleave="resumeAnimation"
    >
      <div>
        <div>100%</div>
        <div>上周期:0</div>
        <div>本周期:2</div>
        <div>字典</div>
      </div>
    </div>
    <div
      class="circle circle2"
      :class="{ paused: !animationStates }"
      @mouseenter="pauseAnimation"
      @mouseleave="resumeAnimation"
    >
      <div>
        <div>100%</div>
        <div>上周期:0</div>
        <div>本周期:2</div>
        <div>字典</div>
      </div>
    </div>
    <div
      class="circle circle3"
      :class="{ paused: !animationStates }"
      @mouseenter="pauseAnimation"
      @mouseleave="resumeAnimation"
    >
      <div>第三个容器</div>
    </div>
    <div
      class="circle circle4"
      :class="{ paused: !animationStates }"
      @mouseenter="pauseAnimation"
      @mouseleave="resumeAnimation"
    >
      <div>第四个容器</div>
    </div>
    <div
      class="circle circle5"
      :class="{ paused: !animationStates }"
      @mouseenter="pauseAnimation"
      @mouseleave="resumeAnimation"
    >
      <div>第五个容器</div>
    </div>
    <div
      class="circle circle6"
      :class="{ paused: !animationStates }"
      @mouseenter="pauseAnimation"
      @mouseleave="resumeAnimation"
    >
      <div>第六个容器</div>
    </div> -->
    <div class="center-content">中间的大球</div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const periodArr = ref([
  {
    count_t0: 0,
    count_t1: 2,
    ratio: '100',
    sentiment_keyword: '字典'
  },
  {
    count_t0: 0,
    count_t1: 5,
    ratio: '100',
    sentiment_keyword: '首席'
  },
  {
    count_t0: 3,
    count_t1: 6,
    ratio: '100',
    sentiment_keyword: '科学家'
  },
  {
    count_t0: 4,
    count_t1: 10,
    ratio: '150',
    sentiment_keyword: '实验学校'
  },
  {
    count_t0: 2,
    count_t1: 10,
    ratio: '400',
    sentiment_keyword: '纪实'
  },
  {
    count_t0: 1,
    count_t1: 10,
    ratio: '900',
    sentiment_keyword: '海淀区'
  }
]);

// 创建一个响应式对象来跟踪每个小球的动画状态
const animationStates = ref(true);

// 暂停动画的函数
const pauseAnimation = () => {
  animationStates.value = false;
};

// 恢复动画的函数
const resumeAnimation = () => {
  animationStates.value = true;
};
</script>

<style lang="scss" scoped>
@font-face {
  font-family: electronicFont;
  src: url('@/assets/font/DS-DIGIT.TTF');
}
.ratio-area {
  font-size: 14px;
  color: #f29701;
  .ratio-text {
    font-family: electronicFont;
    font-size: 20px;
  }
}
.ellipse {
  width: 600px;
  min-height: 400px;
  border-radius: 50%;
  position: absolute;
  bottom: 0;
  /* border: 6px rgba(255, 255, 255, 0.1) solid; */
  transform-style: preserve-3d;
  transform: rotateZ(0) rotateY(0) rotateX(70deg);
}

.ellipse .circle {
  width: 100px;
  height: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  cursor: pointer;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: #ffffff;
  font-size: 12px;
  text-align: center;
  box-shadow: inset 0 0 10px rgba(242, 151, 1, 0.8);
  /* 添加3D变换支持 */
  transform-style: preserve-3d;
  /* 添加平滑过渡 */
  transition: transform 0.3s ease;
}

.center-content {
  height: 280px;
  width: 280px;
  border-radius: 50%;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: rotateX(-70deg) translate(-50%, -100px);
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgb(10, 28, 83);
  box-shadow: inset 0 0 10px rgba(255, 255, 255, 0.9);
}

/* 修改动画，添加透视缩放效果 */
@keyframes move1 {
  0% {
    transform: rotateZ(-270deg) translateX(300px) rotateZ(270deg) rotateY(0) rotateX(-70deg) scale(1.3);
  }

  16.67% {
    transform: rotateZ(-210deg) translateX(300px) rotateZ(210deg) rotateY(0) rotateX(-70deg) scale(1.15);
  }

  33.33% {
    transform: rotateZ(-150deg) translateX(300px) rotateZ(150deg) rotateY(0) rotateX(-70deg) scale(1);
  }

  50% {
    transform: rotateZ(-90deg) translateX(300px) rotateZ(90deg) rotateY(0) rotateX(-70deg) scale(0.85);
  }

  66.67% {
    transform: rotateZ(-30deg) translateX(300px) rotateZ(30deg) rotateY(0) rotateX(-70deg) scale(1);
  }

  83.33% {
    transform: rotateZ(30deg) translateX(300px) rotateZ(-30deg) rotateY(0) rotateX(-70deg) scale(1.15);
  }

  100% {
    transform: rotateZ(90deg) translateX(300px) rotateZ(-90deg) rotateY(0) rotateX(-70deg) scale(1.3);
  }
}

@keyframes move2 {
  0% {
    transform: rotateZ(-210deg) translateX(300px) rotateZ(210deg) rotateY(0) rotateX(-70deg) scale(1.15);
  }

  16.67% {
    transform: rotateZ(-150deg) translateX(300px) rotateZ(150deg) rotateY(0) rotateX(-70deg) scale(1);
  }

  33.33% {
    transform: rotateZ(-90deg) translateX(300px) rotateZ(90deg) rotateY(0) rotateX(-70deg) scale(0.85);
  }

  50% {
    transform: rotateZ(-30deg) translateX(300px) rotateZ(30deg) rotateY(0) rotateX(-70deg) scale(1);
  }

  66.67% {
    transform: rotateZ(30deg) translateX(300px) rotateZ(-30deg) rotateY(0) rotateX(-70deg) scale(1.15);
  }

  83.33% {
    transform: rotateZ(90deg) translateX(300px) rotateZ(-90deg) rotateY(0) rotateX(-70deg) scale(1.3);
  }

  100% {
    transform: rotateZ(150deg) translateX(300px) rotateZ(-150deg) rotateY(0) rotateX(-70deg) scale(1.15);
  }
}

@keyframes move3 {
  0% {
    transform: rotateZ(-150deg) translateX(300px) rotateZ(150deg) rotateY(0) rotateX(-70deg) scale(1);
  }

  16.67% {
    transform: rotateZ(-90deg) translateX(300px) rotateZ(90deg) rotateY(0) rotateX(-70deg) scale(0.85);
  }

  33.33% {
    transform: rotateZ(-30deg) translateX(300px) rotateZ(30deg) rotateY(0) rotateX(-70deg) scale(1);
  }

  50% {
    transform: rotateZ(30deg) translateX(300px) rotateZ(-30deg) rotateY(0) rotateX(-70deg) scale(1.15);
  }

  66.67% {
    transform: rotateZ(90deg) translateX(300px) rotateZ(-90deg) rotateY(0) rotateX(-70deg) scale(1.3);
  }

  83.33% {
    transform: rotateZ(150deg) translateX(300px) rotateZ(-150deg) rotateY(0) rotateX(-70deg) scale(1.15);
  }

  100% {
    transform: rotateZ(210deg) translateX(300px) rotateZ(-210deg) rotateY(0) rotateX(-70deg) scale(1);
  }
}

@keyframes move4 {
  0% {
    transform: rotateZ(-90deg) translateX(300px) rotateZ(90deg) rotateY(0) rotateX(-70deg) scale(0.85);
  }

  16.67% {
    transform: rotateZ(-30deg) translateX(300px) rotateZ(30deg) rotateY(0) rotateX(-70deg) scale(1);
  }

  33.33% {
    transform: rotateZ(30deg) translateX(300px) rotateZ(-30deg) rotateY(0) rotateX(-70deg) scale(1.15);
  }

  50% {
    transform: rotateZ(90deg) translateX(300px) rotateZ(-90deg) rotateY(0) rotateX(-70deg) scale(1.3);
  }

  66.67% {
    transform: rotateZ(150deg) translateX(300px) rotateZ(-150deg) rotateY(0) rotateX(-70deg) scale(1.15);
  }

  83.33% {
    transform: rotateZ(210deg) translateX(300px) rotateZ(-210deg) rotateY(0) rotateX(-70deg) scale(1);
  }

  100% {
    transform: rotateZ(270deg) translateX(300px) rotateZ(-270deg) rotateY(0) rotateX(-70deg) scale(0.85);
  }
}

@keyframes move5 {
  0% {
    transform: rotateZ(-30deg) translateX(300px) rotateZ(30deg) rotateY(0) rotateX(-70deg) scale(1);
  }

  16.67% {
    transform: rotateZ(30deg) translateX(300px) rotateZ(-30deg) rotateY(0) rotateX(-70deg) scale(1.15);
  }

  33.33% {
    transform: rotateZ(90deg) translateX(300px) rotateZ(-90deg) rotateY(0) rotateX(-70deg) scale(1.3);
  }

  50% {
    transform: rotateZ(150deg) translateX(300px) rotateZ(-150deg) rotateY(0) rotateX(-70deg) scale(1.15);
  }

  66.67% {
    transform: rotateZ(210deg) translateX(300px) rotateZ(-210deg) rotateY(0) rotateX(-70deg) scale(1);
  }

  83.33% {
    transform: rotateZ(270deg) translateX(300px) rotateZ(-270deg) rotateY(0) rotateX(-70deg) scale(0.85);
  }

  100% {
    transform: rotateZ(330deg) translateX(300px) rotateZ(-330deg) rotateY(0) rotateX(-70deg) scale(1);
  }
}

@keyframes move6 {
  0% {
    transform: rotateZ(-330deg) translateX(300px) rotateZ(330deg) rotateY(0) rotateX(-70deg) scale(1.15);
  }

  16.67% {
    transform: rotateZ(-270deg) translateX(300px) rotateZ(270deg) rotateY(0) rotateX(-70deg) scale(1.3);
  }

  33.33% {
    transform: rotateZ(-210deg) translateX(300px) rotateZ(210deg) rotateY(0) rotateX(-70deg) scale(1.15);
  }

  50% {
    transform: rotateZ(-150deg) translateX(300px) rotateZ(150deg) rotateY(0) rotateX(-70deg) scale(1);
  }

  66.67% {
    transform: rotateZ(-90deg) translateX(300px) rotateZ(90deg) rotateY(0) rotateX(-70deg) scale(0.85);
  }

  83.33% {
    transform: rotateZ(-30deg) translateX(300px) rotateZ(30deg) rotateY(0) rotateX(-70deg) scale(1);
  }

  100% {
    transform: rotateZ(30deg) translateX(300px) rotateZ(-30deg) rotateY(0) rotateX(-70deg) scale(1.15);
  }
}

.ellipse .circle1 {
  animation: move1 10s linear infinite;
}

.ellipse .circle2 {
  animation: move2 10s linear infinite;
}

.ellipse .circle3 {
  animation: move3 10s linear infinite;
}

.ellipse .circle4 {
  animation: move4 10s linear infinite;
}

.ellipse .circle5 {
  animation: move5 10s linear infinite;
}

.ellipse .circle6 {
  animation: move6 10s linear infinite;
}

/* 添加鼠标悬停效果增强透视感 */
.ellipse .circle:hover {
  transform: scale(1.3);
  z-index: 1000;
  box-shadow: inset 0 0 10px rgba(35, 85, 206, 0.9);
}

/* 使用动态类控制动画播放状态 */
.ellipse .circle1.paused {
  animation-play-state: paused;
}

.ellipse .circle2.paused {
  animation-play-state: paused;
}

.ellipse .circle3.paused {
  animation-play-state: paused;
}

.ellipse .circle4.paused {
  animation-play-state: paused;
}

.ellipse .circle5.paused {
  animation-play-state: paused;
}

.ellipse .circle6.paused {
  animation-play-state: paused;
}
</style>
